<template>
  <div class="dialog-form">
    <el-form ref="departmentRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="所属公司" prop="companyId">
        <el-tree-select
          v-model="form.companyId"
          :data="companyList"
          :render-after-expand="true"
          :props="treeProps"
          node-key="id"
          :default-expanded-keys="expandedKeys"
          check-strictly
          :disabled="type == 3"
        />
      </el-form-item>
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入部门名称" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="debtor">
        <el-input v-model="form.debtor" placeholder="请输入部门负责人" />
      </el-form-item>
      <el-form-item label="显示排序" prop="sorts">
        <el-input v-model="form.sorts" placeholder="数值越小越靠前" />
      </el-form-item>
      <el-form-item label="部门状态" prop="state">
        <el-radio-group v-model="form.state">
          <el-radio
            v-for="dict in sys_company_status"
            :key="dict.value"
            :value="dict.value"
          >{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getDepartment, addDepartment, updateDepartment } from "@/api/company/department"

const { proxy } = getCurrentInstance()
const { sys_company_status }  = proxy.useDict('sys_company_status')

const emits = defineEmits(['cancel', 'confirm'])
const props = defineProps(['companyList'])

const departmentRef = ref()
const expandedKeys = ref([])
const treeProps = {
  label: 'name',
  disabled: (data, node) => {
    return data.state == 2 || data.check == false
  }
}
const type = ref()              // 列表未选中公司新增  2修改  3列表选中公司后新增
const form = ref({
  id: null,
  companyId: null,
  name: null,
  debtor: null,
  state: '1',                   // 1启用  2禁用
  sorts: null,
})
const rules = {
  companyId: [
    { required: true, message: "请选择所属公司", trigger: "blur" }
  ],
  name: [
    { required: true, message: "部门名称不能为空", trigger: "blur" }
  ],
  debtor: [
    { required: false, message: "部门负责人不能为空", trigger: "blur" }
  ]
}

const pageInit = (id, companyId) => {
  if (id) {
    type.value = 2
    getDepartment(id).then(response => {
      form.value = response.data
      form.value.state = form.value.state.toString()
      form.value.companyId = Number(form.value.companyId)
      expandedKeys.value = [form.value.companyId]
    })
  } else if (companyId) {
    type.value = 3
    form.value.companyId = companyId
  } else {
    type.value = 1
  }
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  departmentRef.value.validate(valid => {
    if (valid) {
      if (form.value.id) {
        updateDepartment(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          emits('confirm')
        })
      } else {
        addDepartment(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          emits('confirm')
        })
      }
    }
  })
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>

</style>